<template>
    <MainSlot v-loading="loading">
        <template v-slot:searchForm>
            <SearchForm v-if="formItemList.length" :formItemList="formItemList" :unfoldFlag="unfoldFlag"
                @search="search" @isUnfold="(v) => { unfoldFlag = v }">
            </SearchForm>
        </template>
        <template v-slot:btn>
            <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
        </template>
        <template v-slot:table>
            <TableData :config="table_config" :tableThead="tableThead" :dataList="dataList" :loading="loading"
                @selection-change="selectionChange">
                <template v-slot:status="{ row }">
                    <span class="success">{{ row.status ? '显示' : '隐藏' }}</span>
                </template>
                <template v-slot:ipAdressVoList="{ row }">
                    <div style="text-align: left;">
                        <p v-if="row.rosterType == 'BLACKLIST'">黑名单：{{ row.ipAdressVoList.length?'已配置':'未配置' }}</p>
                        <p v-else-if="row.rosterType == 'WHITELIST'">白名单：{{ row.ipAdressVoList.length?'已配置':'未配置' }}</p>
                        <p v-else>/</p>
                    </div>
                </template>
                <template v-slot:topping="{ row }">
                    {{ row.topping ? '置顶' : '--' }}
                </template>
                <template v-slot:releaseStatus="{ row }">
                    <el-button :type="row.status ? 'danger' : 'primary'" plain @click="release(row)">{{ row.status ?
        '隐藏' : '显示'
                        }}</el-button>
                </template>
            </TableData>
        </template>
        <template v-slot:pagination>
            <Pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page="page" :size="size"
                :total="total">
            </Pagination>
        </template>
        <template v-slot:dialogModule>
            <AddEdit :title="'专栏'" @closeDialog="closeDialog" :enumList="enumList" :enumjumpList="enumjumpList"
                :navigationList="navigationList" :userList="userList" :addEditFlag="addEditFlag"
                :dialogVisible="dialogVisible" :data="formData">
            </AddEdit>
        </template>
    </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import specColumn from "@/api/specColumn";
import AddEdit from "./components/addEdit.vue";
import userMessage from "@/api/userMessage";
import navigation from "@/api/navigation";
import enumApi from "@/api/enum";


export default {
    components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, AddEdit },
    data() {
        return {
            unfoldFlag: false,
            loading: false,
            dialogVisible: false,
            dialogVisiblemajorReprints: false,
            addEditFlag: 'add',
            selectList: [],
            userList: [],
            navigationList: [],
            articleList: [],
            formData: {},
            form: {
                toppingArticleId: '',
                secondColumnArticleIdList: []
            },
            page: 1, size: 10,
            total: 10,
            selectIndex: 0,
            searchFormData: {},
            btnList: ['add', 'delete'],
            dataList: [],
            enumList: [],
            enumjumpList: [],
            tableThead: [
                { isShow: true, label: '专栏名称', prop: 'specColumnName' },
                { isShow: true, label: '置顶', slotName: 'topping' },
                { isShow: true, label: '置顶排序', prop: 'transverse' },
                { isShow: true, label: '状态', slotName: 'status' },
                { isShow: true, label: '显示/隐藏', slotName: 'releaseStatus' },
                { isShow: true, label: 'ip区间', slotName: 'ipAdressVoList'},
            ],
            // 配置项
            table_config: {
                isCheckBox: true,

                isOperation: true,
                // 表格操作列
                operation: {
                    label: '操作',
                    width: '250',
                    cols: [
                        {
                            label: '编辑',
                            type: 'primary',
                            flag: 'edit',
                            handleRow: this.handleRow
                        },
                        {
                            label: '置顶',
                            type: 'primary',
                            flag: 'top',
                            handleRow: this.handleRow
                        },
                        {
                            label: '删除',
                            type: 'danger',
                            flag: 'del',
                            handleRow: this.handleRow
                        }
                    ]
                },
            },
            formItemList: [
                {
                    label: '文章标题',
                    type: 'input',
                    param: 'title',
                    multiple: false,
                    isShow: true
                },
                {
                    label: '文章来源',
                    type: 'input',
                    param: 'operator',
                    multiple: false,
                    isShow: true
                }
            ]
        }
    },
    mounted() {
        this.queryPageList();
        this.initData();
    },
    methods: {
        async initData() {
            let { data: userList } = await userMessage.queryList({});
            let { data: navigationList } = await navigation.queryList({});
            let { data: articleList } = await specColumn.queryList({ status: true });
            let { data: enumObj } = await enumApi.queryRosterType();
            let { data: enumjumpObj } = await enumApi.queryJumpType();
            this.enumjumpList = [];
            for (let key in enumjumpObj) {
                this.enumjumpList.push({ value: key, text: enumjumpObj[key] })
            }
            this.enumList = [];
            for (let key in enumObj) {
                this.enumList.push({ value: key, text: enumObj[key] })
            }
            this.articleList = articleList;
            this.navigationList = navigationList;
            this.userList = userList;
        },
        async queryMajorReprintsId() {
            let { data: articleList } = await specColumn.queryList({ status: true });
            this.articleList = articleList;
            let rut = articleList.find(item => {
                return item.majorReprints == 'TOPPING'
            })
            let list = articleList.map(item => {
                if (item.majorReprints == 'SECONDCOLUMN') {
                    return item.articleId
                }
            })
            list = list.filter(id => id)
            this.form = {
                toppingArticleId: rut ? rut.articleId : '',
                secondColumnArticleIdList: list.filter(id => id)
            }
        },
        delList(deleteList = [], key = 'articleId') {
            let list = []
            deleteList.forEach(item => {
                list.push(item[key])
            })
            console.log(list)
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //删除
                specColumn.delList(list).then(res => {
                    if (res.code == 0) {
                        this.queryPageList();
                        this.$message.success('删除成功')
                    } else {
                        this.$message.warning(res.msg || '删除失败')
                    }
                }).catch(err => {
                    this.$message.warning('删除失败')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //启停
        release(data) {
            this.$confirm('你确定继续此操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                specColumn.release({ ...data, status: !data.status }).then(res => {
                    if (res.code == 0) {
                        this.queryPageList();
                        this.$message.success('操作成功')
                    } else {
                        this.$message.warning(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.warning('操作失败')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        queryPageList() {
            let params = {
                page: this.page,
                size: this.size,
                condition: this.searchFormData
            }
            this.loading = true;
            //查询列表
            specColumn.queryPageList({ ...params }).then(res => {
                this.loading = false;
                if (res.code == 0) {
                    let { list, total } = res.data;
                    this.dataList = list || [];
                    this.total = total || 0;
                    // this.$message.success(res.msg || '查询成功')
                } else {
                    this.$message.warning(res.msg || '查询失败')
                }
            }).catch(err => {
                this.loading = false;
                this.$message.warning('查询失败')
            })
        },
        search(data) {
            this.page = 1;
            this.searchFormData = { ...this.searchFormData, ...data };
            this.queryPageList();
        },
        handleSizeChange(size) {
            this.size = size;
            this.queryPageList();
        },
        handleCurrentChange(page) {
            this.page = page;
            this.queryPageList();
        },
        // 操作方法
        handleRow(rowData, item) {
            if (item.flag == 'edit') {
                this.dialogVisible = true;
                this.formData = JSON.parse(JSON.stringify(rowData))
            } else if (item.flag == 'del') {
                this.delList([rowData]);
            } else if (item.flag == 'top') {
                this.setTop(rowData.specColumnId)
            }
            this.addEditFlag = item.flag
        },
        setTop(specColumnId) {
            specColumn.topColumn({ specColumnId }).then(res => {
                this.queryPageList();
            })
        },
        // 多选方法
        selectionChange(val) {
            this.selectList = val || []
        },
        //获取选中Btn
        getBtnEvent(flag) {
            console.log(flag)
            if (flag == 'add') {
                this.dialogVisible = true
            } else if (flag == 'delete') {
                if (this.selectList.length > 0) {
                    this.delList(this.selectList)
                } else {
                    this.$message.warning('请先选择表单数据项后再删除！')
                }
            } else if (flag == 'majorReprints') {
                this.queryMajorReprintsId();
                this.dialogVisiblemajorReprints = true;
            }
            this.addEditFlag = flag
        },
        closeForm() {
            this.dialogVisiblemajorReprints = false;
        },
        //关闭弹窗
        closeDialog() {
            this.dialogVisible = false;
            this.queryPageList();
            this.queryMajorReprintsId();
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped></style>